<template>
  <div style="width: 200px">
      阿里图标
      <span class="icon iconfont">&#xe668;</span>
      <div style="display: flex;margin-bottom: 10px">
          <el-input type="text" placeholder="请输入关键字" size="small" v-model="filterText" @blur="search"></el-input>
          <el-button type="text" @click="next">下一条</el-button>
          <el-button type="text" @click="up">上一条</el-button>
      </div>
      <el-scrollbar ref="scroll">
          <div style="max-height:100px;">
              <el-tree
                     id="filterTree"
                     class="filter-tree"
                      ref="tree"
                      :data="data"
                      show-checkbox
                      node-key="id"
                      highlight-current
                      default-expand-all
                      :filter-node-method="filterNode"
                      :props="defaultProps">
              </el-tree><!--  :default-expanded-keys="[2, 3]"
                      :default-checked-keys="[5]"  -->
          </div>
      </el-scrollbar>
  </div>
</template>

<script>
export default {
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {
            filterText:'',
            filterArr:[],
            count:0,
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    methods:{
        up(){
            this.count --
            if (this.count >= 0){

                this.$nextTick(async () => {
                    await  this.$refs['tree'].setCurrentKey(this.filterArr[this.count].id);
                    let nodeOffsetTop = document.querySelector(
                        '.filter-tree .is-current'
                    ).offsetTop;
                    this.$refs['scroll'].wrap.scrollTop = nodeOffsetTop
                    console.log("nodeOffsetTop:",nodeOffsetTop)

                });

            }
        },
        next(){
            this.$refs.tree.filter(this.filterText);
            this.count ++
            if (this.count < this.filterArr.length - 1){
                this.$nextTick(async () => {
                    await  this.$refs['tree'].setCurrentKey(this.filterArr[this.count].id);
                    let nodeOffsetTop = document.querySelector(
                        '.filter-tree .is-current'
                    ).offsetTop;
                    this.$refs['scroll'].wrap.scrollTop = nodeOffsetTop
                    console.log("nodeOffsetTop:",nodeOffsetTop)
                    // let parentNodeClientHeight = document.querySelector('#filterTree')
                    //     .clientHeight;
                    // let parentNodeScrollHeight = document.querySelector(
                    //     '.filter-tree .el-tree-node'
                    // ).scrollHeight;
                    // if (nodeOffsetTop > parentNodeClientHeight) {
                    //     document.querySelector('#filterTree').scrollTop =
                    //         nodeOffsetTop - parentNodeClientHeight / 2;
                    // }
                });
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            console.log("data:",data);
            if ( data.label.indexOf(value) !== -1){
                this.filterArr.push(data) ;
            }

           console.log("filterArr:",this.filterArr)
            //return data.label.indexOf(value) !== -1;
           return true
        },
        search(){
            if (this.filterArr.length>0){
                //this.$refs['tree'].setCurrentKey(this.filterArr[0].id);
                this.$nextTick(async () => {
                    await  this.$refs['tree'].setCurrentKey(this.filterArr[0].id);
                    let nodeOffsetTop = document.querySelector('.filter-tree .is-current').offsetTop;
                    this.$refs['scroll'].wrap.scrollTop = nodeOffsetTop
                    console.log("nodeOffsetTop:",nodeOffsetTop)
                });
            }
        }
    }
};
</script>